import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import Popover from '../../ch/components/Popover.vue';

<Meta
  title="Components/Popover"
  component={Popover}
  argTypes={{
    color: { control: { type: 'select', options: ['info', 'error', 'warning', 'success', 'gray', 'red', 'yellow', 'orange', 'green', 'blue', 'indigo', 'purple', 'pink'] } },
    icon: { control: { type: 'boolean' } },
  }}
/>

export const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { Popover },
  template: `
    <div style="padding: 60px 0;">
      <Popover
        :id="id"
        :label="label"
        :color="color"
        :icon="icon"
      >
        <p>Popover content</p>
        <a href="#">Link</a>
      </Popover>
    </div>
  `,
});

# Popover

## Example

Popovers are used to attach an extra information to a text, a label, a button, etc. If you need to display a lot of  additional information, consider using the [Modal component](?path=/docs/components-modal--example) instead.

To ensure a seamless user experience, it is important to avoid hiding essential information required to complete a task, such as filling out a form, within a popover. If such information is necessary, it should be displayed prominently on the page rather than within a popover, as this design pattern is generally not recommended for primary information. Popovers should be reserved for supplementary information only.


<Canvas>
  <Story
    name="Example"
    args={{
      id: '1',
      color: 'blue',
      label: 'Click here to display the popover',
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

<ArgsTable story="Example" />

## Button
The popover button can be a text, the question mark `?` icon, or a combination of both (default). Once clicked, the popover is displayed, like a modal.

## Colors
The popover window has color variations. The following css classes are built:
- `popover--info`
- `popover--error`
- `popover--warning`
- `popover--success`

and

- `popover--gray`
- `popover--red`
- `popover--yellow`
- `popover--orange`
- `popover--green`
- `popover--blue`
- `popover--indigo`
- `popover--purple`
- `popover--pink`
- `popover--white`

# Interactions and accessibility

Each popover item is wrapped into a `popover-wrapper`. This regroup a button `.popover-button` and a related `.popover` element.

```html
<span id="popover-wrapper-1" class="popover-wrapper">
  <button
    id="popover-button-1"
    aria-controls="popover-1"
    aria-haspopup="dialog"
    aria-expanded="false"
    class="popover-button"
  >
    <span class="popover-button__label">
      Popover button
    </span>
    <svg
      viewBox="0 0 24 24"
      class="popover-button__icon icon icon--lg icon--HelpCircle"
    >
      <!-- svg markup here -->
    </svg>
  </button>
  <span aria-hidden="true" class="popover-backdrop"></span>
  <span
    id="popover-1"
    aria-hidden="true"
    role="tooltip"
    class="popover popover--blue"
  >
    <span aria-hidden="true" class="popover__close">
      <svg
        viewBox="0 0 24 24"
        class="icon icon--lg icon--Cancel"
      >
        <!-- svg markup here -->
      </svg>
    </span>
    <p>Popover content</p>
    <a href="#" tabindex="-1">Link</a>
  </span>
</span>
```

During interactions, some ARIA attributes have to be modified for a correct behaviour on assitive technologies.

Each button have an `aria-controls` attribute pointing the id of the drawer. When the button is clicked, the popover is displayed with a `.popover--active` class and the transparent backdrop is displayed with `.popover-backdrop--active`.

Below an example of a simple script resolving 3 accessibility topics:
1. Toggle `aria-expanded` attribute on popover button.
2. Toggle `aria-hidden` attribute on popover drawer.
3. Hide the eventual focusable elements inside a closed popover


```javascript
function getFocusableElements (element = document) {
  return [
    ...element.querySelectorAll(
      'a[href], button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])'
    )
  ].filter(
    el => !el.hasAttribute('disabled') && !el.getAttribute('aria-hidden')
  )
}

const Popover = {
  init(target) {
    const wrapper = document.querySelector(target)
    const button = wrapper.querySelector('.popover-button')
    const backdrop = wrapper.querySelector('.popover-backdrop')
    const popover = wrapper.querySelector('.popover')
    const popoverClose = wrapper.querySelector('.popover__close')
    let focusableElements = getFocusableElements(popover)

    focusableElements.forEach(item => {
      item.tabIndex =  -1
    })

    function handleClickOutside(event) {
      const target = event.target
      if (target !== button && !wrapper.contains(target)) {
        closePopover()
      }
    }

    function closePopover() {
      button.setAttribute("aria-expanded", false)
      popover.classList.remove("popover--active")
      popover.setAttribute("aria-hidden", true)
      backdrop.classList.remove("popover-backdrop--active")
      // make focusable popover unfocusable
      focusableElements.forEach(item => {
        item.tabIndex =  -1
      })
      document.removeEventListener('click', handleClickOutside)
    }

    function openPopover() {
      button.setAttribute("aria-expanded", true)
      popover.classList.add("popover--active")
      popover.setAttribute("aria-hidden", false)
      backdrop.classList.add("popover-backdrop--active")
      // make focusable popover focusable again
      focusableElements.forEach(item => {
        item.tabIndex = undefined
      })
      document.addEventListener('click', handleClickOutside)
    }

    button.addEventListener("click", (event) => {
      popover.classList.contains("popover--active") ? closePopover() : openPopover()
    })

    backdrop.addEventListener("click", (event) => {
      popover.classList.contains("popover--active") ? closePopover() : openPopover()
    })

    if (popoverClose) {
      popoverClose.addEventListener("click", (event) => { closePopover() })
    }
  },
}
export default Popover
```




